<template>
  <div style="padding: 10px;background-color: #0288d1;">
    <h4>孙组件</h4>
    <p>祖先组件传递的用户信息：{{ userInfo }}</p>
  </div>
</template>

<script>
import {inject} from 'vue'

export default {
  name: "Sun",
  setup() {

    // 接受上层 provide 传递的响应式 userInfo 对象
    const userInfo = inject("userInfo")

    return {
      userInfo
    }
  }
}
</script>

<style scoped>

</style>